import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Switch, Drawer, Form, Button, Input, InputNumber, Space, Select, Typography, Row, Col, message } from 'antd';
import { Link, connect } from 'umi';
import IconFont from '@/components/Iconfont';
import AlipayOption from './components/AlipayOption';
import WeChatPayOption from './components/WeChatPayOption';
import UnionpayOption from './components/UnionpayOption';

const { Text } = Typography;
const DrawForm = ({record,obj}) => {
    if (record.payChanelIndex == "alipay")
        return <AlipayOption closeDraw={()=>obj.onClose} record={record} />
    else if (record.payChanelIndex == "wechatpay")
        return <WeChatPayOption closeDraw={()=>obj.onClose} record={record} />
    else
        return <UnionpayOption closeDraw={()=>obj.onClose} record={record} />
}
class UserPayChanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            customers: [],
            visible: false,
            record: {},
            customerNow: {
                appId: 'null',
                custId: 0
            },
        }
    }
    formRef = React.createRef();
    componentDidMount() {
        this.fetchDatas();
        this.fetchCustomers();
    }
    showDrawer = (record) => {
        this.setState({ visible: true, record });
    };
    fetchDatas = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: 'Abp/getListByCust',
            payload: this.state.customerNow,
        }).then(() => {
            var resp = this.props.response.result;
            this.setState({
                dataSource: resp,
                loading: false,
            });
        });
    };

    enablePayChanel = (record) => {
        if (record) {
            const { customerNow } = this.state;
            if (customerNow && customerNow.custId > 0) {
                this.props.dispatch({
                    type: 'Abp/enablePayChanel',
                    payload: {
                        payChanelId: record.payChanelID,
                        payChanelName: record.payChanelName,
                        appId: customerNow.appId,
                        custId: customerNow.custId,
                    },
                }).then(() => {
                    this.fetchDatas();
                });
            }
            else {
                message.warning('请先选择客户！');
            }
        }
    };

    fetchCustomers = () => {
        this.props.dispatch({
            type: 'Abp/getAll',
            payload: { SkipCount: 0, MaxResultCount: 10000 },
            control: 'Customers',
        }).then(() => {
            var resp = this.props.response.result?.items;
            this.setState({
                customers: resp,
            });
        });
    };
    onClose = () => {
        this.setState({ visible: false, loading: false });
    };
    onFinish = values => {
        this.setState({ loading: true });
        console.log(values);
    }
    handleChange = (value, option) => {
        var customerNow = {
            appId: option.key,
            custId: option.value,
        }
        var _this = this;
        this.setState({ customerNow }, function () {
            _this.fetchDatas();
        });
    }
    render() {
        const columns = [
            {
                width: 60,
                render: (record) => <IconFont style={{ fontSize: 20 }} type={record.icon} />
            },
            {
                title: '支付渠道名称',
                dataIndex: 'payChanelName',
                key: 'payChanelName',
            },
            {
                title: '应用场景',
                dataIndex: 'payChanelMemo',
                key: 'payChanelMemo',
            },
            {
                title: '状态',
                dataIndex: 'isEnable',
                key: 'isEnable',
                render: (text, record) =>
                    <span><Switch checkedChildren="启用" unCheckedChildren="关闭" checked={record.isEnable} onChange={() => this.enablePayChanel(record)} /></span>
            },
            {
                render: (record) =>
                    <span>
                        <Button type="primary" size="small" disabled={!record.isEnable} onClick={() => this.showDrawer(record)}>参数配置</Button>
                    </span>
            },
        ];
        const { record } = this.state;
        
        return (
            <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Card>
                            <Select
                                style={{ width: 240 }}
                                showSearch
                                placeholder="请选择客户"
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                onChange={this.handleChange}
                            >
                                {
                                    this.state.customers?.map((item) => {
                                        return (<Select.Option key={item.appID} value={item.id}>{item.customerName}</Select.Option>)
                                    })
                                }

                            </Select>
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Table rowKey="payChanelIndex" loading={this.state.loading} dataSource={this.state.dataSource} columns={columns} pagination={false} />
                    </Col>
                </Row>

                <Drawer
                    title={record.payChanelName}
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    destroyOnClose={true}
                    width={680}
                >
                    <DrawForm record={record} obj={this} />
                </Drawer>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }) => ({
    response: Abp.response,
}))(UserPayChanel);